<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/earth.css">
    <script src="js/jquery1.9.1.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app" class="container clearfix">
        <div class="con_left left">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="dmsg">
            <p>电站信息</p>
            <div class="pic">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="33.23%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="140" stroke-width="40" stroke="#30FFFC" fill="none"></circle>
                    <circle id="circle1" cx="280" cy="160" r="140" stroke-width="40" stroke="#FF7BBA" fill="none"
                            transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=" ">
                    </circle>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="33.23%" height="100%" viewBox="0,0,320,320" style="margin-left: 24%">
                    <defs><!--渐变设置-->
                        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="80%">
                            <stop offset="0%" style="stop-color: #D7539F;stop-opacity: 1"></stop>
                            <stop offset="100%" style="stop-color: #3699F6;stop-opacity: 1"></stop>
                        </linearGradient>
                    </defs>
                    <circle id="circle2" cx="160" cy="160" r="140" stroke-width="40" stroke="#1D447B" fill="none"
                            stroke-linecap="round" stroke-dasharray=" " transform="matrix(0,-1,1,0,0,320)">
                    </circle>
                    <circle id="circle3" cx="280" cy="160" r="140" stroke-width="40" stroke="url(#grad)" fill="none"
                            transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=" " stroke-linecap="round">
                    </circle>
                </svg>
            </div>
            <div class="svg_num1">
                <p class="bad" v-text="errorNum"></p>
                <p class="all" v-text="stationNum"></p>
            </div>
            <div class="svg_num2">
                <p><span v-text="currentPower"></span>千瓦</p>
            </div>
            <div class="num">
                <div class="numtop clearfix">
                    <p class="left">电站数量</p>
                    <i class="right"><span v-text="stationNum"></span> 台</i>
                </div>
                <div class="numbuttom clearfix">
                    <p class="left">装机容量</p>
                    <i class="right"><span v-text="machinePower"></span> MW</i>
                </div>
            </div>
        </div>
        <div class="today_d">
            <p>今日发电</p>
            <p><span v-text="eleToday" id="eleToday"></span><span>度</span></p>
            <p>累计发电<span v-text="eleTotal"></span><span>度</span></p>
        </div>
        <div class="trend">
            <div id="table" style="width: 100%;height: 220px;">

            </div>
        </div>
    </div>
    <div class="con_center left">
        <div class="title">
            <p>青岛奥博能源电力有限公司</p>
        </div>
        <div class="earth">
            <div class="circle1 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#1EB6D6"></circle>
                    <text x="50" y="210" fill="#fff" font-size="120">156</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle2 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#1EB6D6"></circle>
                    <text x="50" y="210" fill="#fff" font-size="120">164</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle3 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#1EB6D6"></circle>
                    <text x="50" y="210" fill="#fff" font-size="120">132</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle4 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#1EB6D6"></circle>
                    <text x="50" y="210" fill="#fff" font-size="120">134</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle5 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#FFB400"></circle>
                    <text x="50" y="210" fill="#fff" font-size="120">260</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle6 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#FFB400"></circle>
                    <text x="50" y="210" fill="#fff" font-size="120">221</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle7 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#40DB7E"></circle>
                    <text x="80" y="210" fill="#fff" font-size="120">89</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle8 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#40DB7E"></circle>
                    <text x="80" y="210" fill="#fff" font-size="120">32</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle9 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#40DB7E"></circle>
                    <text x="80" y="210" fill="#fff" font-size="120">56</text>
                </svg>
                <div class="waveRaidus"></div>
            </div>
            <div class="circle10 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#40DB7E"></circle>
                </svg>
            </div>
            <div class="circle11 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#40DB7E"></circle>
                </svg>
            </div>
            <div class="circle12 cir">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0,0,320,320">
                    <circle cx="160" cy="160" r="160" fill="#40DB7E"></circle>
                </svg>
            </div>
        </div>
    </div>
    <div class="con_right left">
        <div class="time">
            <span id="date">2018-1-16</span>
            <span id="time">8:05</span>
            <p>已安全运行<span id="run">102</span>天</p>
        </div>
        <div class="efficiency">
            <p>发电效能</p>
            <ul>
                <li class="clearfix" v-for="item in datas">
                    <p v-text="item.stationName"></p>
                    <div class="main left">
                        <div class="bar" :style="{width:item.pefficacy}"></div>
                    </div>
                    <span class="right" v-text="item.pefficacy"></span>
                </li>
            </ul>
        </div>
        <div class="equipment clearfix">
            <p>设备信息</p>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="33.23%" height="60%" viewBox="0,0,320,320">
                <circle cx="160" cy="160" r="140" stroke-width="40" stroke="#30FFFC" fill="none"></circle>
                <circle id="circle4" cx="280" cy="160" r="140" stroke-width="40" stroke="#FF7BBA" fill="none"
                        transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=" ">
                </circle>
            </svg>
            <div class="svg_num3">
                <p class="abnormal" v-text="inverterBad"></p>
                <p class="total" v-text="inverterTotal"></p>
            </div>
            <div class="equ_msg left">
                <p>逆变器总数 <span v-text="inverterTotal"></span> 台</p>
                <p>正常逆变器 <span v-text="inverterNormal"></span> 台</p>
                <p>异常逆变器 <span v-text="inverterBad"></span> 台</p>
            </div>
        </div>
        <div class="saving">
            <p>节能减排</p>
            <ul>
                <li>
                    <div class="icon">
                        <img src="images/icon_co2.png" alt="">
                    </div>
                    <p>二氧化碳减排</p>
                    <span v-text="co2Reduce"></span>
                    <span>吨</span>
                </li>
                <li>
                    <div class="icon">
                        <img src="images/icon_zhishu.png" alt="">
                    </div>
                    <p>植树造林</p>
                    <span v-text="plantingTrees"></span>
                    <span>颗</span>
                </li>
                <li>
                    <div class="icon">
                        <img src="images/icon_meitan.png" alt="">
                    </div>
                    <p>节约煤炭</p>
                    <span v-text="saveCoal"></span>
                    <span>吨</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer f1" id="scroll_div">
        <marquee behavior="" direction="">
            <li class="pad_right" v-for="data in footerDatas">
                <span v-text="data.stationName"></span><b><img src="images/play.png" alt=""></b>
                今日发电：<span v-text="data.todayEle"></span>；
                累计发电：<span v-text="data.totalEle"></span>；故障：<i v-text="data.bad"></i>
            </li>
        </marquee>
    </div>
</div>
<script src="js/data.js"></script>
<script src="js/main.js"></script>
<script src="js/table.js"></script>
</body>
</html>